<template>
  <div class="home-container">
    <!-- 轮播图区域 -->
    <el-col class="top">
      <el-carousel
        indicator-position="outside"
        :interval="4000"
        type="card"
        height="230px"
        trigger="click"
      >
        <el-carousel-item v-for="item in swiper" :key="item.id">
          <img class="swiper" :src="item.set_value" alt="" />
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <!-- 公司信息区域 -->
    <el-col class="min">
      <div class="card" v-for="item in companyInfo" :key="item.id">
        <div @click="open(item.set_name, item.set_value)">
          <span class="title">{{ item.set_name }}</span>
          <p class="content" v-html="item.set_value"></p>
        </div>
      </div>
    </el-col>
    <!-- 底部表格 -->
    <el-col class="bottom">
      <div class="table">
        <div class="title">
          <span>公司公告</span>
        </div>
        <div class="content">
          <el-table :data="noticeList" @row-click="openMessageDialog">
            <el-table-column min-width="180">
              <template v-slot="{ row }">
                <div class="table-title">{{ row.message_title }}</div>
              </template>
            </el-table-column>
            <el-table-column min-width="150">
              <template v-slot="{ row }">
                <el-tag type="danger" v-if="row.message_level === '必要'">{{
                  row.message_level
                }}</el-tag>
                <el-tag type="warning" v-else-if="row.message_level === '重要'">{{
                  row.message_level
                }}</el-tag>
                <el-tag type="primary" v-else>{{ row.message_level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column min-width="150" prop="message_publish_department"></el-table-column>
            <el-table-column min-width="150">
              <template v-slot="{ row }"> {{ formaDate(row.message_create_time) }} </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="table">
        <div class="title">
          <span>系统消息</span>
        </div>
        <div class="content">
          <el-table :data="systemMsgList" @row-click="openMessageDialog">
            <el-table-column min-width="180">
              <template v-slot="{ row }">
                <div class="table-title">{{ row.message_title }}</div>
              </template>
            </el-table-column>
            <el-table-column min-width="150">
              <template v-slot="{ row }"> {{ formaDate(row.message_create_time) }} </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-col>
  </div>
  <el-dialog :title="title" v-model="dialog" width="50%">
    <div v-html="content"></div>
  </el-dialog>
  <el-dialog :title="detailMessage?.message_category" v-model="MessageDialog" center width="45%">
    <div class="message-dialog-container">
      <div class="left">
        <div class="title">公告主题： {{ detailMessage?.message_title }}</div>
        <div class="content" v-html="detailMessage?.message_content"></div>
      </div>
      <div class="right">
        <div>发布部门: {{ detailMessage?.message_publish_department }}</div>
        <div>发布人: {{ detailMessage?.message_publish_name }}</div>
        <div>类别: {{ detailMessage?.message_category }}</div>
        <div>
          等级:
          <el-tag type="danger" v-if="detailMessage?.message_level === '必要'">{{
            detailMessage?.message_level
          }}</el-tag>
          <el-tag type="warning" v-else-if="detailMessage?.message_level === '重要'">{{
            detailMessage?.message_level
          }}</el-tag>
          <el-tag type="primary" v-else>{{ detailMessage?.message_level }}</el-tag>
        </div>
        <div>发布时间: {{ formaDate(detailMessage?.message_create_time!) }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { getAllSwiperAPI, getCompanyIntroduceAPI } from '@/api/company'
import { getMessageListAPI } from '@/api/message'
import moment from 'moment'
import { onMounted, ref } from 'vue'

/** 处理日期 */
const formaDate = (date: string) => {
  return moment(date).format('YY-MM-DD HH:mm')
}

// 弹窗数据
const title = ref<string>('')
const dialog = ref<boolean>(false)
const content = ref<string>('')

// 打开弹窗
const open = (itemTitle: string, itemContent: string) => {
  title.value = itemTitle
  dialog.value = true
  content.value = itemContent
}

// 轮播图数据
const swiper = ref<CompanyList[]>([])
// 公司信息数据
const companyInfo = ref<CompanyList[]>([])
// 获取轮播图
const getAllSwiper = async () => {
  const res = await getAllSwiperAPI()
  swiper.value = res.data as CompanyList[]
}

/** 公司公告列表 */
const noticeList = ref<Message[]>([])
const getnoticeList = async () => {
  const res = await getMessageListAPI(1, '通知公告')
  noticeList.value = res.data.splice(0, 4)
}

/** 系统消息列表 */
const systemMsgList = ref<Message[]>([])
const getSystemMsgList = async () => {
  const res = await getMessageListAPI(1, '系统消息')
  systemMsgList.value = res.data.splice(0, 4)
}

// 获取公司信息
const getCompanyIntroduce = async () => {
  const res = await getCompanyIntroduceAPI()
  const [name, ...Info] = res.data as CompanyList[]
  companyInfo.value = Info
}

const detailMessage = ref<Message>()
const MessageDialog = ref<boolean>(false)
const openMessageDialog = (row: Message) => {
  MessageDialog.value = true
  detailMessage.value = row
}
onMounted(() => {
  getSystemMsgList()
  getAllSwiper()
  getnoticeList()
  getCompanyIntroduce()
})
</script>

<style scoped lang="scss">
.home-container {
  height: calc(100vh - $base-header-height - $base-breadCrumb-height - 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #eee;

  .top {
    background-color: #fff;
    padding: 0 20px;
    flex: 1;

    .swiper {
      width: 100%;
      height: 100%;
    }
  }
  .min {
    flex: 1;
    margin-top: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .card {
      margin: 8px;
      flex: 1;
      background-color: #eee;
      padding: 8px;
      .title {
        padding: 1px;
        border-bottom: 1px solid rgb(82, 182, 210);
      }
      .content {
        display: inline-block;
        font-size: 14px;
        text-indent: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        border: 1px solid #eef0f5;
      }
    }
  }
  .bottom {
    flex: 1;
    margin-top: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 8px;
    .table {
      display: flex;
      flex-direction: column;
      width: 49%;
      .title {
        width: 100%;
        border-bottom: 1px solid #e43434;
      }
      .content {
        .table-title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.message-dialog-container {
  display: flex;
  justify-content: space-between;
  .left {
    flex: 1;

    .title {
      border-bottom: 1px solid #ccc;
      padding: 6px;
    }
    .content {
      padding: 20px;
      text-align: center;
    }
  }
  .right {
    flex: 0.5;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ccc;
    div {
      margin-left: 8px;
      padding: 6px;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
